import { ProForm, ProFormDigit, ProFormRadio, ProFormSelect, ProFormText } from "@ant-design/pro-components"
import { useDictOptions } from "@/hooks";

const SysAppForm = () => {
  const { data: options } = useDictOptions('sys_normal_disable')
  const { data: statusOptions } = useDictOptions('SYS_APP_TYPE')

  return <>
    <ProForm.Group rowProps={{
      gutter: 20
    }}>

      <ProForm.Item name='id' hidden></ProForm.Item>
      <ProForm.Item name='version' hidden></ProForm.Item>

      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="appName"
        label="应用名称"
        placeholder="应用名称"
        rules={[{ required: true, message: '请输入应用名称' }]}
      />

      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="appCode"
        label="应用编码"
        placeholder="应用编码"
        rules={[{ required: true, message: '请输入应用编码' }]}
      />
      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="resUrl"
        label="应用地址"
        placeholder="应用地址"
        rules={[
          { required: true, message: '请输入应用地址' },
          {
            validator: (_, value) => {
              if (value && !/^https*:\/\/[a-z]*[0-9]*.[a-z0-9]+/g.test(value)) {
                return Promise.reject('请输入正确的应用地址')
              }
              return Promise.resolve()
            },
            validateTrigger: 'onBlur'
          }
        ]}
      />
      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="callbackUrl"
        label="回调地址"
        placeholder="回调地址"
        rules={[
          { required: true, message: '请输入回调地址' },
          {
            validator: (_, value) => {
              if (value && !/^https*:\/\/[a-z]*[0-9]*.[a-z0-9]+/g.test(value)) {
                return Promise.reject('请输入正确的回调地址')
              }
              return Promise.resolve()
            },
            validateTrigger: 'onBlur'
          }
        ]}
      />

      <ProFormSelect
        hidden
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="appType"
        label="应用分类"
        placeholder="请选择应用分类"
        rules={[{ required: true, message: '请选择应用分类' }]}
        options={statusOptions}
      />

      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="secreId"
        label="APPID"
        placeholder="请输入APPID"
        rules={[{ required: true, message: '请输入APPID' }]}
      />
      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="secretKey"
        label="APPSecretKey"
        placeholder="请输入APPSecretKey"
        rules={[{ required: true, message: '请输入APPSecretKey' }]}
      />
      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="defaultPage"
        label="默认打开页面"
        placeholder="请输入"
      />
      <ProFormDigit
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="orderNum"
        label="排序编号"
        min={0}
      />
      <ProFormRadio.Group
        colProps={{ lg: 12, md: 12, sm: 24 }}
        label="启用状态:(1启用,0停用)"
        name="status"
        fieldProps={{
          optionType: "button",
          buttonStyle: "solid"
        }}
        options={options}
      />
      <ProFormRadio.Group
        colProps={{ lg: 12, md: 12, sm: 24 }}
        label="沙箱模式"
        name="sandboxModel"
        fieldProps={{
          optionType: "button",
          buttonStyle: "solid"
        }}
        options={[
          { label: 'with', value: 'with' },
          { label: 'iframe', value: 'iframe' },
        ]}
        rules={[{ required: true, message: '该项不能为空！' }]}
      />
      <ProFormRadio.Group
        colProps={{ lg: 12, md: 12, sm: 24 }}
        label="脚本加载方式"
        name="scriptLoadWay"
        fieldProps={{
          optionType: "button",
          buttonStyle: "solid"
        }}
        options={[
          { label: 'no', value: 'no' },
          { label: 'inline', value: 'inline' },
        ]}
        rules={[{ required: true, message: '该项不能为空！' }]}
      />
      <ProFormRadio.Group
        colProps={{ lg: 12, md: 12, sm: 24 }}
        label="应用类型"
        name="appLoadType"
        fieldProps={{
          optionType: "button",
          buttonStyle: "solid"
        }}
        options={[
          { label: 'csr', value: 'csr' },
          { label: 'ssr', value: 'ssr' },
        ]}
        rules={[{ required: true, message: '该项不能为空！' }]}
      />
      <ProFormRadio.Group
        colProps={{ lg: 12, md: 12, sm: 24 }}
        label="开启缓存"
        name="openCache"
        fieldProps={{
          optionType: "button",
          buttonStyle: "solid"
        }}
        options={[
          { label: '否', value: 'off' },
          { label: '是', value: 'on' },
        ]}
        rules={[{ required: true, message: '该项不能为空！' }]}
      />

    </ProForm.Group>
  </>
}

export default SysAppForm